<template>
  <div class="webview-container">
    <!-- 顶部状态栏 -->
    <div v-if="orienten == 'h'" class="webview-header rlative">

      <div class="flex items-center justify-between ">
        <div class="bg-#394243  w-28 h-28 rounded-6 text-center leading-28">
          <van-icon name="arrow-left" @click="closeWebView" :size="20" />
        </div>
      </div>
      <span class="center-title color-#ffffff font-bold text-center">{{ gameData.name }}</span>
      <div class="bg-#2d3233  rounded-6 absolute right-15 flex items-center justify-between">
        <img src="/imgs/gold_icon.png" alt="" class="w-20 ml-5">
        <div class="px-5">{{ gameData.gold }}</div>
      </div>
    </div>
    <div v-if="orienten !== 'h'" class="" id="mybox2">
      <FloatingIcon  position="right" />
    </div>

    <!-- WebView内容区域 -->
    <iframe :src="gameData.webViewUrl" frameborder="0" allowfullscreen="true" webkitallowfullscreen="true"
      mozallowfullscreen="true" class="webview-content" scrolling="no">
    </iframe>

  </div>
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { Locale } from 'vant'
import FloatingIcon from '../floatingIcon/index.vue'
const { t, setLocale } = useI18n();
interface GameInfo {
  gold: number
  direct: number
  name: string
  webViewUrl: string
}
const actions = [
  { text: '', icon: 'add-o'},
  { text: '', icon: 'more-o' }
];
const handleAddClick = () => {
  console.log('点击了添加按钮');
  // 这里写第一个按钮的逻辑
  showPopover.value = false; // 可选：点击后关闭 Popover
};

const handleMoreClick = () => {
  console.log('点击了更多按钮');
  // 这里写第二个按钮的逻辑
  showPopover.value = false; // 可选：点击后关闭 Popover
};
const showPopover = ref(false)
const offset = ref({ x: 590, y: 10 });

const props = withDefaults(defineProps<{
  gameData: GameInfo,
}>(), {
  gameData: () => ({
    gold: 0,
    name: '',
    webViewUrl: ''
  })
})

const emits = defineEmits(['close']) // 定义事件
const myBtn = ref(null)
const openSetting = () => {
  showPopover.value = !showPopover.value
  console.log(1111111, showPopover.value);

}
const closeWebView = () => {

  // emits('close', false) // 关闭时通知父组件
  return
  const el = document.documentElement
  if (el.requestFullscreen) {
    el.requestFullscreen()
  } else if (el.webkitRequestFullscreen) {
    el.webkitRequestFullscreen() // Safari
  } else if (el.mozRequestFullScreen) {
    el.mozRequestFullScreen() // Firefox
  } else if (el.msRequestFullscreen) {
    el.msRequestFullscreen() // IE/Edge
  } else {
    alert("你的浏览器不支持全屏模式")
  }
}
const orienten = ref('w')
const checkOrientation = () => {
  const orientation = window.matchMedia("(orientation: portrait)").matches ? "h" : "w";
  orienten.value = orientation;
  console.log(`当前方向: `, orienten.value);
}
onMounted(() => {
  // 初始检测
  checkOrientation();
})

// 监听方向变化
window.addEventListener("orientationchange", checkOrientation);
window.addEventListener("resize", checkOrientation); // 兼容某些设备


</script>
<style lang="css" scoped>
.mybox {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

.float {
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: red;
  top: 5px;
  right: 5px;

}


.add {
  width: 55%;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.center-title {
  margin-left: 10px;
  margin-left: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50vw;
  display: inline-block
}

.webview-overlay {
  display: flex;
  flex-direction: column;
  background-color: #000;
}

.webview-container {
  /* border:2px solid rgba(255, 0, 0); */
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  /* 隐藏容器滚动条 */
  position: fixed;
  top: 0;
  left: 0;


}

.webview-header {
  width: 100%;
  height: 60px;
  background-color: #1a1a1a;
  display: flex;
  align-items: center;
  padding: 0 15px;
  color: white;
  font-size: 18px;
}

.webview-content {
  width: 100vw;
  /* height: 80%; */
  border: none;
  /* 去掉边框 */
  display: block;
  margin: 0;
  padding: 0;
  height: 100dvh;
}

/* 处理移动端安全区域 */
/* @supports (height: 100dvh) {
  .webview-content {
    height: 100dvh;
    使用动态视口单位

  }
} */
</style>